<template>
  <div class="navbar">
    <ul class="fl">
      <li>
        <i class="iconfont icon-icon-test"></i>
        <span class="area-text">重庆</span>
      </li>
    </ul>
    <ul class="fr">
      <li v-for="(item1, index1) in lists" :key="index1" :class="item1.name">
        <div>
          <a
            v-for="(item2, index2) in item1.text"
            :key="index2"
            :href="item2.path"
            :style="
              item2.id == '5_1' || item2.id == '1_2' ? { color: 'red' } : ''
            "
            @mouseenter="enter(item2.flag, index2)"
            @mouseleave="leave()"
          >
            {{ item2.name }}
          </a>
          <span class="space">|</span>
        </div>
        <!-- <div class="fr_text" v-if="ischoose == true && current == ind"></div> -->
      </li>
      <!--  v-if="ischoose == true && current == ind" -->
      <div class="fr_text" v-if="ischoose == true && current == ind"></div>
    </ul>
  </div>
</template>
<script>
export default {
  name: "navBar",
  data() {
    return {
      lists: [
        {
          id: "1",
          name: "bar-login",
          text: [
            {
              id: "1_1",
              name: "你好，请登录",
              path: "https://passport.jd.com/new/login.aspx",
              flag: false,
            },
            {
              id: "1_2",
              name: "免费注册",
              path: "https://reg.jd.com/reg/person",
              flag: false,
            },
          ],
        },
        {
          id: "2",
          name: "bar-text",
          text: [
            {
              id: "2_1",
              name: "我的订单",
              path: "",
              flag: false,
            },
          ],
        },
        {
          id: "3",
          name: "bar-text",
          text: [
            {
              id: "3_1",
              name: "我的京东",
              path: "",
              flag: true,
            },
          ],
        },
        {
          id: "4",
          name: "bar-text",
          text: [
            {
              id: "4_1",
              name: "京东会员",
              path: "",
              flag: false,
            },
          ],
        },
        {
          id: "5",
          name: "bar-text",
          text: [
            {
              id: "5_1",
              name: "企业采购",
              path: "",
              flag: true,
            },
          ],
        },
        {
          id: "6",
          name: "bar-text",
          text: [
            {
              id: "6_1",
              name: "客户服务",
              path: "",
              flag: true,
            },
          ],
        },
        {
          id: "7",
          name: "bar-text",
          text: [
            {
              id: "7_1",
              name: "网站导航",
              path: "",
              flag: true,
            },
          ],
        },
        {
          id: "8",
          name: "bar-text",
          text: [
            {
              id: "8_1",
              name: "手机京东",
              path: "",
              flag: false,
            },
          ],
        },
      ],
      ischoose: null,
      current: 0,
      ind: null,
    };
  },
  created() {},
  methods: {
    changeStyle(a) {
      // item2.id == '5_1' || item2.id == '1_2' ? { color: 'red' } : ''
      // if (a == "5-1") {
      //   return { color: "red" };
      // }
    },
    enter(a, b) {
      console.log(a);
      this.current = b;
      this.ischoose = a;
      this.ind = b;
    },
    leave() {
      this.current = null;
    },
  },
};
</script>
<style scoped>
/* 导航栏整体 */
.navbar {
  height: 30px;
}
/* 导航左边 */
ul.fl {
  float: left;
  line-height: 30px;
}
/* 定位字体 */
.icon-icon-test {
  color: red;
}
/* 清除浮动 */
.fl::after,
.fr::after {
  content: "";
  clear: both;
}
/* 导航右边 */
.fr {
  float: right;
  display: flex;
  flex-direction: row;
}
.fr li {
  height: 30px;
  /* line-height: 30px; */
}
a {
  display: inline-block;
  height: 100%;
  line-height: 30px;
  color: #666;
  margin: 0 5px;
}
a:hover {
  color: red;
}
#actived {
  border: 0.1px solid #000;
  background-color: #fff;
}
.fr_text {
  width: 90px;
  height: 100px;
  background-color: rgb(230, 179, 179);
  position: absolute;
  top: 30px;
  z-index: 2;
  border: 1px solid #ccc;
  box-shadow: 1px 2px 1px rgb(0 0 0 / 10%);
}
</style>

